<!DOCTYPE html>
<html class=" responsive touch" lang="zh-cn">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
    <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no"/>
    <title>兴化市卷本</title>
    <link rel="shortcut icon" href="img/home_01.svg"/>
    <link href="css/navi_bar.css" rel="stylesheet" type="text/css"/>
    <link href="css/xhjb.css" rel="stylesheet" />

    <script type="text/javascript" src="js/vue/vue.min.js"></script>
    <script type="text/javascript" src="js/vue/axios.min.js"></script>
    <script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>
    <script type="text/javascript">$J = jQuery.noConflict();</script>
    <script type="text/javascript" src="js/navi_bar.js"></script>
</head>
<body class="v6 responsive_page">
<div class="responsive_page_frame with_header main">
    <div class="responsive_page_menu_ctn mainmenu">
        <div class="responsive_page_menu" id="responsive_page_menu">
            <div class="mainmenu_contents">
                <div class="mainmenu_contents_items">
                    <div style="text-align: center;">
                        <a style="padding-top: 16px;" class="menuitem"> <img src="img/xhjb.png" style="width: 177px;height: 60px;"/> </a>
                    </div>

                    <a class="menuitem supernav" data-tooltip-type="selector"
                       data-tooltip-content=".submenu_store">神 话</a>
                    <div class="submenu_store" style="display: none;"  data-submenuid="神话">
                        <a class="submenuitem" :id="column.id" @click="getData(column.id, $event)" v-for="column in columns">{{column.title}}</a>
                    </div>

                    <a class="menuitem supernav" data-tooltip-type="selector"
                       data-tooltip-content=".submenu_store2">传 说</a>
                    <div class="submenu_store2" style="display: none;"  data-submenuid="传说">
                        <a class="submenuitem" :id="column.id" @click="getData(column.id, $event)" v-for="column in columns2">{{column.title}}</a>
                    </div>

                    <a class="menuitem supernav" data-tooltip-type="selector"
                       data-tooltip-content=".submenu_store3">故 事</a>
                    <div class="submenu_store3" style="display: none;"  data-submenuid="故事">
                        <a class="submenuitem" :id="column.id" @click="getData(column.id, $event)" v-for="column in columns3">{{column.title}}</a>
                    </div>

                    <a class="menuitem supernav" data-tooltip-type="selector"
                       data-tooltip-content=".submenu_store4">歌 谣</a>
                    <div class="submenu_store4" style="display: none;"  data-submenuid="歌谣">
                        <a class="submenuitem" :id="column.id" @click="getData(column.id, $event)" v-for="column in columns4">{{column.title}}</a>
                    </div>

                    <a class="menuitem supernav" data-tooltip-type="selector"
                       data-tooltip-content=".submenu_store5">谚 语</a>
                    <div class="submenu_store5" style="display: none;"  data-submenuid="谚语">
                        <a class="submenuitem" :id="column.id" @click="getData(column.id, $event)" v-for="column in columns5">{{column.title}}</a>
                    </div>

                    <a class="menuitem supernav" data-tooltip-type="selector"
                       data-tooltip-content=".submenu_store6">关于本书</a>
                    <div class="submenu_store6" style="display: none;"  data-submenuid="关于本书">
                        <a class="submenuitem" :id="column.id" @click="getData(column.id, $event)" v-for="column in columns6">{{column.title}}</a>
                    </div>

                    <a class="menuitem supernav" data-tooltip-type="selector"
                       data-tooltip-content=".submenu_store7">样式调整</a>
                    <div class="submenu_store7" style="display: none;"  data-submenuid="store7">
                        <a class="bgDiv">
                            <button class="yellowBg bgBt" @click="changeBg('#f6f4ec')"></button>
                            <button class="greenBg bgBt" @click="changeBg('#e6f0e6')"></button>
                            <button class="blueBg bgBt" @click="changeBg('#e3f5fa')"></button>
                            <button class="orangeBg bgBt" @click="changeBg('#f0e6db')"></button>
                            <button class="pinkBg bgBt" @click="changeBg('#f5e9ef')"></button>
                        </a>
                        <a class="bgDiv" style="padding-bottom: 20px;">
                            <button @click="changeFontSize('-1')">A-</button>
                            <span>{{fontSize}}</span>
                            <button @click="changeFontSize('1')">A+</button>
                        </a>
                    </div>

                    <a class="menuitem" style="border-bottom: 0px;" @click="redirectToChatRoom()">当前在线人数：{{counter}}</a>

                    <div style="height:150px;border-bottom: 1px solid #000000;"></div>


                    <div style="text-align: center;">
                        <a style="padding-top: 16px;" class="menuitem"> <img src="img/nordic.png" style="width: 177px;height: 60px;"/> </a>
                    </div>

                    <a class="menuitem supernav" data-tooltip-type="selector"
                       data-tooltip-content=".submenu_store8">挪 威</a>
                    <div class="submenu_store8" style="display: none;"  data-submenuid="挪威">
                        <a class="submenuitem" :id="column.id" @click="getData(column.id, $event)" v-for="column in columns8">{{column.title}}</a>
                    </div>

                    <a class="menuitem supernav" data-tooltip-type="selector"
                       data-tooltip-content=".submenu_store9">瑞 典</a>
                    <div class="submenu_store9" style="display: none;"  data-submenuid="瑞典">
                        <a class="submenuitem" :id="column.id" @click="getData(column.id, $event)" v-for="column in columns9">{{column.title}}</a>
                    </div>

                    <a class="menuitem supernav" data-tooltip-type="selector"
                       data-tooltip-content=".submenu_store10">芬 兰</a>
                    <div class="submenu_store10" style="display: none;"  data-submenuid="芬兰">
                        <a class="submenuitem" :id="column.id" @click="getData(column.id, $event)" v-for="column in columns10">{{column.title}}</a>
                    </div>

                    <a class="menuitem supernav" data-tooltip-type="selector"
                       data-tooltip-content=".submenu_store11">丹 麦</a>
                    <div class="submenu_store11" style="display: none;"  data-submenuid="丹麦">
                        <a class="submenuitem" :id="column.id" @click="getData(column.id, $event)" v-for="column in columns11">{{column.title}}</a>
                    </div>

                    <a class="menuitem supernav" data-tooltip-type="selector"
                       data-tooltip-content=".submenu_store12">冰 岛</a>
                    <div class="submenu_store12" style="display: none;"  data-submenuid="冰岛">
                        <a class="submenuitem" :id="column.id" @click="getData(column.id, $event)" v-for="column in columns12">{{column.title}}</a>
                    </div>

                    <a class="menuitem supernav" data-tooltip-type="selector"
                       data-tooltip-content=".submenu_store13">拉普兰岛</a>
                    <div class="submenu_store13" style="display: none;"  data-submenuid="拉普兰岛">
                        <a class="submenuitem" :id="column.id" @click="getData(column.id, $event)" v-for="column in columns13">{{column.title}}</a>
                    </div>

                    <a class="menuitem supernav" data-tooltip-type="selector"
                       data-tooltip-content=".submenu_store14">法罗岛</a>
                    <div class="submenu_store14" style="display: none;"  data-submenuid="法罗岛">
                        <a class="submenuitem" :id="column.id" @click="getData(column.id, $event)" v-for="column in columns14">{{column.title}}</a>
                    </div>
                    <div style="height:100px;border-top: 1px solid #585b63;"></div>
                </div>
            </div>
        </div>
    </div>
    <div class="responsive_header" style="height:24px;">
        <div class="responsive_header_content">
            <div id="responsive_menu_logo">
                <img src="img/menu.png" height="100%"/>
            </div>
            <div v-cloak class="responsive_header_logo" style="font-weight: 700;color:white;font-size: 18px;">
                {{title}}
            </div>
        </div>
    </div>
    <!--文本内容遮罩 -->
    <div class="responsive_page_content_overlay">
    </div>
    <div class="responsive_page_content">
        <div v-cloak class="tale-content">
            <!-- 主界面具体展示内容 -->
            <p v-for="paragraph in paragraphs">{{paragraph}}</p>

            <div v-if="type == '谚语' || type == '关于本书' || type == '挪威' || type == '瑞典' || type == '芬兰' || type == '丹麦' || type == '冰岛' || type == '拉普兰岛' || type == '法罗岛'">

            </div>

            <div style="text-align: center;" v-else>
                <p>口述人：{{narrator}}　搜集人：{{recorder}}</p>
            </div>

            <div class="feedbackDiv" style="display: none;">
                <textarea placeholder="示例：可以是错别字提醒，可以是样式建议，也可以是新的故事"></textarea>
                <button @click="saveFeedback()">提交</button>
            </div>

            <br/>
            <div style="opacity:0.3;position: absolute;right: 15px;bottom: 10px;">
                <!--穿透图片的点击事件-->
                <img @click="showFeedback()" src="img/edit.png" alt="留言" style="width: 25px;" />
            </div>
        </div>
        </div>
        <!-- responsive_page_legacy_content -->
    </div>
    <!-- responsive_page_content -->
</div>
<!-- responsive_page_frame -->
<script>
    new Vue({
        el: '.main',
        data: {
            type: '',
            title: '',
            paragraphs: [],
            narrator: '',
            recorder: '',
            columns: [id = '', title = ''],
            columns2: [id = '', title = ''],
            columns3: [id = '', title = ''],
            columns4: [id = '', title = ''],
            columns5: [id = '', title = ''],
            columns6: [id = '', title = ''],
            columns8: [id = '', title = ''],
            columns9: [id = '', title = ''],
            columns10: [id = '', title = ''],
            columns11: [id = '', title = ''],
            columns12: [id = '', title = ''],
            columns13: [id = '', title = ''],
            columns14: [id = '', title = ''],
            timer: '',
            counter: 0,
            fontSize: 20,
            timer2: '',
        },
        watch: {    //监控字段值的变化
            title: function(data) {
                // 切换内容时，定位到最上面
                window.scrollTo({ top: 0, behavior: 'smooth' });

                // 隐藏留言框
                document.getElementsByClassName("feedbackDiv")[0].style.display = "none";

                // 设置字体，用于从各乡镇入选作品切换到其他栏目时字体变小的问题
                var fs = localStorage.getItem("fontSize");
                if (fs != null) {
                    document.getElementsByClassName("tale-content")[0].style.fontSize = fs + "px";
                } else {
                    // 将字体大小添加到缓存中
                    localStorage.setItem("fontSize", "20");
                }

                // 对于统计表，修改字体大小
                if ("各乡镇入选作品" == data) {
                    document.getElementsByClassName("tale-content")[0].style.fontSize = "17px";
                }

            },
            type: function(data) {
                // 动态设置样式
                if ("歌谣" == data) {
                    document.getElementsByClassName("tale-content")[0].className = "tale-content ballad";
                } else {
                    document.getElementsByClassName("tale-content")[0].className = "tale-content";
                }
                localStorage.setItem('responsiveMenuLastSubmenu', data);
            }
        },
        created: function () { //在模板渲染成html前调用，即通常初始化某些属性值，然后再渲染成视图。
            this.getData(localStorage.getItem("taleId") == null ? 1 : parseInt(localStorage.getItem("taleId")), null);
            this.getMyth('神话');
            this.getMyth('传说');
            this.getMyth('故事');
            this.getMyth('歌谣');
            this.getMyth('谚语');
            this.getMyth('关于本书');
            this.getMyth('挪威');
            this.getMyth('瑞典');
            this.getMyth('芬兰');
            this.getMyth('丹麦');
            this.getMyth('冰岛');
            this.getMyth('拉普兰岛');
            this.getMyth('法罗岛');
            this.getCounter();
        },
        methods: {
            getData: function (id, event) {
                const that = this;

                // 用户切换故事时，取消之前故事标题的选中样式，并给现在的故事标题添加选中样式
                if (event != null && localStorage.getItem("taleId") != String(id)) {
                    if (document.getElementsByClassName("submenuitem active")[0] != null) {
                        document.getElementsByClassName("submenuitem active")[0].className = "submenuitem";
                    }
                    event.currentTarget.className = "submenuitem active";
                }

                // 更新故事id缓存
                localStorage.setItem("taleId", id);

                // 先去浏览器缓存中取值
                var paramsTemp = JSON.parse(sessionStorage.getItem(id));
                if (paramsTemp != null) {
                    that.type = paramsTemp.type;
                    that.title = paramsTemp.title;
                    that.paragraphs = paramsTemp.paragraphs;
                    that.narrator = paramsTemp.narrator;
                    that.recorder = paramsTemp.recorder;
                } else {
                    axios.get("/getTale/" + id)
                        .then(function (response) {
                            if (response.data) {
                                var data = response.data;
                                that.type = data.type;
                                that.title = data.title;
                                that.paragraphs = data.paragraphs;
                                that.narrator = data.narrator;
                                that.recorder = data.recorder;

                                // 将故事内容缓存到浏览器中
                                var params = {
                                    type: that.type,
                                    title: that.title,
                                    paragraphs: that.paragraphs,
                                    narrator: that.narrator,
                                    recorder: that.recorder
                                };
                                sessionStorage.setItem(id, JSON.stringify(params));

                            } else {
                                alert('访问错误,请检查网络');
                            }
                        })
                        .catch(function (error) {
                            console.log(error);
                        });
                }

            },
            getMyth: function (type) {
                const that = this;
                axios.get("/getTalesByType/" + type)
                    .then(function (response) {
                        if (response.data) {
                            if ("神话" == type) {
                                that.columns = response.data;
                            } else if ("传说" == type) {
                                that.columns2 = response.data;
                            } else if ("故事" == type) {
                                that.columns3 = response.data;
                            } else if ("歌谣" == type) {
                                that.columns4 = response.data;
                            } else if ("谚语" == type) {
                                that.columns5 = response.data;
                            } else if ("关于本书" == type) {
                                that.columns6 = response.data;
                            } else if ("挪威" == type) {
                                that.columns8 = response.data;
                            } else if ("瑞典" == type) {
                                that.columns9 = response.data;
                            } else if ("芬兰" == type) {
                                that.columns10 = response.data;
                            } else if ("丹麦" == type) {
                                that.columns11 = response.data;
                            } else if ("冰岛" == type) {
                                that.columns12 = response.data;
                            } else if ("拉普兰岛" == type) {
                                that.columns13 = response.data;
                            } else if ("法罗岛" == type) {
                                that.columns14 = response.data;
                            }
                        } else {
                            alert('访问错误,请检查网络');
                        }
                    })
                    .catch(function (error) {
                        console.log(error);
                    });
            },
            getCounter: function () {
                const that = this;
                axios.get("/getCounter")
                    .then(function (response) {
                        if (response.status == 200) {
                            that.counter = response.data;
                        } else {
                            alert('访问错误,请检查网络');
                        }
                    })
                    .catch(function (error) {
                        console.log(error);
                    });
            },
            changeBg: function (color) {
                document.getElementsByClassName("tale-content")[0].style.backgroundColor = color;
                localStorage.setItem("bgColor", color);
            },
            changeFontSize: function (ops) {
                const that = this;
                var fontSize = localStorage.getItem("fontSize");

                if (ops == "-1") {
                    if (fontSize > 1) {
                        fontSize = parseInt(fontSize) - 1;
                    }
                } else {
                    if (fontSize < 50) {
                        fontSize = parseInt(fontSize) + 1;
                    }
                }
                that.fontSize = fontSize;
                document.getElementsByClassName("tale-content")[0].style.fontSize = fontSize + "px";
                // 将字体大小添加到缓存中
                localStorage.setItem("fontSize", fontSize);
            },
            showFeedback: function () {
                var display = document.getElementsByClassName("feedbackDiv")[0].style.display;
                if ("none" == display) {
                    document.getElementsByClassName("feedbackDiv")[0].style.display = "block";
                    window.scrollTo({ top: document.body.scrollHeight, behavior: 'smooth' });
                } else {
                    document.getElementsByClassName("feedbackDiv")[0].style.display = "none";
                }
            },
            saveFeedback: function () {
                const that = this;
                var content = document.getElementsByTagName("textarea")[0].value;
                if (content != null && content != "") {
                    if (content.length > 20000) {
                        alert("留言内容过多，请删减！");
                        return;
                    }
                    axios.post("/addFeedback", {
                        type: that.type,
                        title: that.title,
                        content: content,
                        useragent: window.navigator.userAgent
                    })
                        .then(function (response) {
                            if (response.data) {
                                alert("提交成功");
                                document.getElementsByTagName("textarea")[0].value = "";
                                that.showFeedback();
                            } else {
                                alert('访问错误,请检查网络');
                            }
                        })
                        .catch(function (error) {
                            console.log(error);
                        });
                } else {
                    alert("留言内容为空！");
                }
            },
            findAndSetTitle: function () {
                // 刷新页面后，给之前选中的故事标题添加选中样式
                var taleId = localStorage.getItem("taleId");
                if (taleId != null && document.getElementById(taleId) != null) {
                    document.getElementById(taleId).className = "submenuitem active";
                    clearInterval(this.timer2);
                }
            },
            redirectToChatRoom: function () {
                window.location.href = "http://" + window.location.host + "/chatroom.html";
            }
        },
        mounted: function () { //在模板渲染成html后调用，通常是初始化页面完成后，再对html的dom节点进行一些需要的操作。
            this.timer = setInterval(this.getCounter, 8000);
            this.timer2 = setInterval(this.findAndSetTitle, 500);
            // 设置背景色
            var bgColor = localStorage.getItem("bgColor");
            if (bgColor != null) {
                document.getElementsByClassName("tale-content")[0].style.backgroundColor = bgColor;
            }

            // 设置字体
            var fs = localStorage.getItem("fontSize");
            if (fs != null) {
                // 对于统计表，修改字体大小
                if ("各乡镇入选作品" == this.title) {
                    document.getElementsByClassName("tale-content")[0].style.fontSize = "17px";
                } else {
                    document.getElementsByClassName("tale-content")[0].style.fontSize = fs + "px";
                }
                this.fontSize = fs;
            } else {
                localStorage.setItem("fontSize", "20");
            }
        },
        beforeDestroy: function () {
            clearInterval(this.timer);
            clearInterval(this.timer2);
        }
    });
</script>
</body>
</html>